<template>
  <view class="albumPage">
    <view class="head" :style="[{ height: customBar + 'px' }]">
      <u-navbar
        title="相册"
        :autoBack="true"
        :titleStyle="{ fontSize: '34rpx', fontWeight: '500' }"></u-navbar>
    </view>
    <view class="albumBox">
      <view class="list" v-for="(imgV, o) in img.split(',')" :key="o">
        <image
          class="img"
          :src="HTTP_IMG_URL() + imgV"
          @click="checkPhoto(o)"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { HTTP_IMG_URL } from "../../config/app.js";
export default {
  data() {
    return {
      customBar: 99,
      img: "",
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad(params) {
    this.img = params.img;
  },
  methods: {
    HTTP_IMG_URL() {
      return HTTP_IMG_URL;
    },
    checkPhoto(index) {
      var arr = this.img.split(",");
      var b = arr.map(function (item) {
        return HTTP_IMG_URL + item;
      });
      uni.previewImage({
        current: index,
        urls: b,
        indicator: "default",
      });
    },
  },
};
</script>

<style lang="scss">
.albumPage {
  height: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f4;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  .head {
    background: #fff;
  }
  .albumBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 22rpx 32rpx;
    box-sizing: border-box;
    .list {
      width: 332rpx;
      .img {
        width: 332rpx;
        height: 332rpx;
      }
    }
  }
}
</style>
